<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">  
        <p>请选择你的学历层次：</p>
        <select v-model="education">
            <option v-for="item, index in educationList" :value="item.name" :id="item.id">{{ item.name }}</option>
        </select>

        <p>请输入你的学习成绩：</p>
        <input type="number" v-model="score">

        <p>
            <button @click="isShow = !isShow" v-if="!isShow">提交</button>
        </p>

        <div v-if="isShow" class="info">
            <h3>你的学习信息为：</h3>
            <p>{{ education | addStudyInfo(score) }}</p>
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                educationList: [
                    {id: 1, name: "小学", value: "x"},
                    {id: 2, name: "初中", value: "c"},
                    {id: 3, name: "高中", value: "g"},
                    {id: 4, name: "大学", value: "d"}
                ],
                education: "小学",
                score: "",
                isShow: false
            },
            filters: {
                addStudyInfo(edu, sco) {
                    level = ""
                    if(sco < 60) {
                        level = "不合格"
                    } else if(sco <= 80) {
                        level = "良好"
                    } else {
                        level = "优秀"
                    }
                    return `学历层次：${edu},考核成绩：${sco},评级：${level}` 
                }
            }
        })
    </script>
    <style>
        .info {
            border: 1px dashed #000;
            width: 450px;
        }
    </style>
</body>
</html>